<template>
  <div class="home-page">
    <div class="left" :style="{ width: `${state.collapsed ? 76 : 210}px` }">
      <div class="head">
        <RedditOutlined
          :style="{
            'font-size': '30px',
            'margin-right': `${state.collapsed ? 0 : 15}px`,
            color: '#00b0f0',
            transition: 'all 0.3s ease',
          }"
        />
        <h3 v-if="!state.collapsed">校园互助平台</h3>
      </div>
      <a-menu
        class="menu"
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        :mode="state.mode"
        :items="items"
        :inlineCollapsed="state.collapsed"
        :theme="state.theme"
      ></a-menu>
      <div class="foot">
        <a-button type="text" @click="toggleCollapsed" style="width: 46px">
          <MenuUnfoldOutlined
            style="font-size: 20px; color: #eee"
            v-if="state.collapsed"
          />
          <MenuFoldOutlined style="font-size: 20px; color: #eee" v-else />
        </a-button>
      </div>
    </div>
    <div class="right" :style="{ left: `${state.collapsed ? 76 : 210}px` }">
      <div class="head">
        <a-button type="text" @click="toggleCollapsed" style="width: 46px">
          <MenuUnfoldOutlined style="font-size: 18px" v-if="state.collapsed" />
          <MenuFoldOutlined style="font-size: 18px" v-else />
        </a-button>
        <div class="head-right">
          <a-button type="text" class="avatar" @click.prevent>
            <a-badge count="23">
              <BellOutlined style="font-size: 20px" />
            </a-badge>
          </a-button>
          <a-dropdown>
            <a-button type="text" class="lang" @click.prevent>
              <GlobalOutlined />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <small style="margin-right: 4px">CN</small> 简体中文
                </a-menu-item>
                <a-menu-item disabled>
                  <small style="margin-right: 4px">HK</small> 繁体中文
                </a-menu-item>
                <a-menu-item>
                  <small style="margin-right: 4px">EN</small> English
                </a-menu-item>
                <a-menu-item disabled>
                  <small style="margin-right: 4px">BR</small> Portugues
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-dropdown>
            <a-button type="text" class="avatar" @click.prevent>
              <img src="../assets/BiazfanxmamNRoxxVxka.png" />
              <span>admin</span>
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <UserOutlined style="margin-right: 4px" /> 个人中心
                </a-menu-item>
                <a-menu-item>
                  <SettingOutlined style="margin-right: 4px" /> 个人设置
                </a-menu-item>
                <a-divider style="margin: 2px 0" />
                <a-menu-item @click="handleLogout">
                  <LogoutOutlined style="margin-right: 4px" />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
      <div class="body scroll-box">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { h } from "vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DesktopOutlined,
  RedditOutlined,
  GlobalOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  BellOutlined,
  HeartOutlined,
  TableOutlined,
  UserSwitchOutlined,
} from "@ant-design/icons-vue";
export default {
  name: "",
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    RedditOutlined,
    GlobalOutlined,
    UserOutlined,
    SettingOutlined,
    LogoutOutlined,
    BellOutlined,
  },
  mixins: [],
  props: {},
  data() {
    return {
      items: [],
      state: {
        collapsed: false,
        mode: "inline",
        theme: "dark",
        selectedKeys: ["1"],
        openKeys: ["3"],
      },
    };
  },
  computed: {},
  watch: {
    // ["state.selectedKeys"](selectedKeys) {
    //   const item = this.getItem(this.items, selectedKeys);
    //   if (item.path) this.$router.push(item.path);
    // },
  },
  mounted() {
    this.items_init();
    this.selectedKeys_init();
  },
  methods: {
    selectedKeys_init() {
      this.$watch(
        "state.selectedKeys",
        (selectedKeys) => {
          const item = this.getItem(this.items, selectedKeys);
          if (item.path) this.$router.push(item.path);
        },
        { immediate: true }
      );
    },
    handleLogout() {
      this.$router.push({
        path: "/login",
      });
    },
    toggleCollapsed() {
      this.state.collapsed = !this.state.collapsed;
      this.state.openKeys = this.state.collapsed ? [] : this.state.preOpenKeys;
    },
    getItem(arr, key) {
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (element.key == key) {
          return JSON.parse(JSON.stringify(element));
        }
        if (element.children) {
          const item = this.getItem(element.children, key);
          if (item.key) return item;
        }
      }
      return {};
    },
    items_init() {
      this.items = [
        {
          key: "1",
          icon: () => h(DesktopOutlined),
          label: "工作台",
          title: "工作台",
          path: "/home",
        },
        {
          key: "2",
          icon: () => h(HeartOutlined),
          label: "仪表盘",
          title: "仪表盘",
          children: [
            {
              key: "21",
              label: "分析",
              title: "分析",
              path: "/home/analysis",
            },
            {
              key: "22",
              label: "监控",
              title: "监控",
              path: "/home/noPage",
            },
          ],
        },
        {
          key: "3",
          icon: () => h(TableOutlined),
          label: "数据中心",
          title: "数据中心",
          children: [
            {
              key: "31",
              label: "任务类型",
              title: "任务类型",
              path: "/home/taskType",
            },
            {
              key: "32",
              label: "订单管理",
              title: "订单管理",
              path: "/home/orderManagement",
            },
            {
              key: "33",
              label: "投诉处置",
              title: "投诉处置",
              path: "/home/complaintHandling",
            },
          ],
        },
        {
          key: "4",
          icon: () => h(UserSwitchOutlined),
          label: "个人页",
          title: "个人页",
          children: [
            {
              key: "41",
              label: "个人中心",
              title: "个人中心",
              path: "/home/noPage",
            },
            {
              key: "42",
              label: "个人设置",
              title: "个人设置",
              path: "/home/noPage",
            },
          ],
        },
      ];
    },
  },
};
</script>
<style lang='scss' scoped>
.home-page {
  display: flex;
  &::before {
    content: "";
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
  }
}
.left {
  user-select: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: auto;
  z-index: 10;
  //   width: 210px;
  background-color: #001529;
  transition: all 0.3s ease;
  .head {
    height: 64px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    color: #00b0f0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    h3 {
      margin-bottom: 0;
      transition: all 0.6 ease;
      white-space: nowrap;
    }
  }
  .logo-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 64px;
    width: 100%;
  }
  .menu {
    position: absolute;
    top: 64px;
    bottom: 64px;
    left: 0;
    width: 100%;
  }
  .foot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
  }
}
.right {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all 0.3s ease;
  .head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    background-color: #fff;
    z-index: 10;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .lang {
      height: 48px;
    }
    .avatar {
      height: 48px;
      display: flex;
      align-items: center;
      img {
        width: 24px;
        display: block;
        margin-right: 5px;
      }
    }
    .head-right {
      display: flex;
      align-items: center;
    }
  }
  .body {
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
</style>